<template>
  <div class="head">
    <div class="head-left">
      <div>
        Hello, <span style="color:red">{{name}}</span>
        <span>欢迎登录</span>
      </div>
    </div>
    <div class="head-right">
      <a>全部文章</a>
      <a>登录</a>
      <a>注册</a>
      <a>我的文章</a>
      <a href="/create">发表文章</a>
      <a href="javascript:void(0)" @click="logout">退出</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Head",
  props: {
    msg: String
  },
    computed:{

    name() {
      console.log(this.$store);
      
      return this.$store.getters.userName
    }

  },
  methods:{
      logout() {
      this.$store.dispatch('user/loginOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.head-left{
    float: left;
}
.head-right{
float: right;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.head-right a {
  display: inline-block;
  margin-right: 10px;
}
</style>
